<template>
  <van-popup 
    v-model="showPoster" 
    class="totop-popup bg-white" 
    position="bottom"
    @opened="opened"
  >
    <van-row class="popup-head" type="flex" justify="space-between">
      <van-col span="4"></van-col>
      <van-col span="8" class="head-text">请扫码购买</van-col>
      <van-col span="4" class="c-gray text-right" @click="close">
        <van-icon name="cross"/>
      </van-col>
    </van-row>
    <div class="bg-white pd-all popup-body" v-show="showEl">
      <img :src="poster" alt="">
      <p class="text-center">长按海报保存到手机或者发送</p>
    </div>
    <div ref="poster_el" class="pd-all poster-wrap" v-show="!showEl">
      <img class="banner" :src="prod_poster" alt="">
      <p class="prod-title">{{title}}</p>
      <van-row type="flex" justify="space-between" class="price">
        <van-col span="12" tag="span" class="c-buy">￥<b>{{parseFloat(price)}}</b> <del class="c-gray-l">￥{{parseFloat(del)}}</del></van-col>
        <van-col span="12" tag="span" class="c-gray-l text-right">已售{{sales}}</van-col>
      </van-row>
      <div class="qrcode-warp">
        <img class="qrcode-img" :src="qrcode_src" alt="">
        <p><em class="c-buy">{{real_name}}</em>推荐</p>
      </div>
    </div>
  </van-popup>
</template>
<script>
import { 
	Popup,
	Icon,
	Row,
  Col,
  Toast
 } from "vant";
import {
  getStorageUserByKey
} from '@utils/storage_base_config';
import QRCode from 'qrcode' // 二维码
import html2canvas from 'html2canvas' // html2canvas
export default {
  name: 'detail-poster',
  components: {
    [Popup.name]: Popup,
    [Icon.name]: Icon,
    [Row.name]: Row,
    [Col.name]: Col,
  },
  props: {
    banner: Array,
    title: String,
    price: Number,
    del: Number,
    sales: Number,
    qrcode_text: String,
    show: Boolean
  }, 
  data() {
    return {
      qrcode_src: '',
      poster: '',
      showPoster: false,
      showEl: false, 
    }
  },
  computed: {
    real_name() {
      return getStorageUserByKey('realname')
    },
    prod_poster() {
      return this.banner[0] || ''
    },
  },
  watch: {
    show(nw) {
      if(nw && this.qrcode_text){
        this.setQrcode()
      } 
    },
    poster(nw) {
      this.showEl = nw.length > 1
    }
  },
  methods: {
    setQrcode() {
      QRCode.toDataURL(this.qrcode_text, {
        width: 123,
        margin: 0
      }).then(url => {
        this.qrcode_src = url
        this.showPoster = true
        this.poster = ''
      })
    },
    opened() {
      this.$nextTick(() => {
        this.setPoster()
      })
    },
    // 创建海报
    setPoster() {
      window.pageXOffset = document.documentElement.scrollLeft = document.body.scrollLeft = 0
      window.pageYOffset = document.documentElement.scrollTop = document.body.scrollTop = 0
      const poster_el = this.$refs.poster_el
      html2canvas(poster_el, {
        backgroundColor: '#ffffff',
        useCORS: true,
        allowTaint: true,
        logging: true,
      }).then(canvas => {
        let dataURL = canvas.toDataURL('image/jpeg')
        this.poster = dataURL
      })
    },
    close(){
      this.showPoster = false
      this.$emit('close')
    }
  }
}
</script>
<style lang="less" scoped>
@import "~@style_m/basic/utils/index";
@import "~@style_m/components/popup";
.popup-body {
  img {
    width: 100%;
    vertical-align: middle;
  }
}
.poster-wrap {
  img {
    max-width: 100%;
  }
  .banner {
    width: 100%;
    height: calc(66vw -16px);
    object-fit: fill;
  }
  .prod-title {
    margin: 15px 0;
    font-size: 18px;
  }
  .price {
    line-height: 1;
    font-size: 16px;
    align-items: baseline;
    b {
      font-size: 24px;
    }
    .text-right {
      font-size: 12px;
      vertical-align: text-bottom;
    }
  }
  .qrcode-warp {
    margin-top: 10px;
    text-align: center;
    .qrcode-img {
      display: inline-block!important;
      width: 30%;
      margin: 0 auto;
      padding: 20px 10px 10px;
      background: url('~@imgs/scan/scan-bg-orange.png') no-repeat center;
      background-size: contain;
    }
  }
}
</style>